<template>
	<view class="ca-modal-body"
		:class="{'ca-modal-active' : animation, 'ca-modal-H5Top': H5Top, 'ca-modal-H5Bottom': H5Bottom}"
		:data-platform="platform">
		<view class="ca-modal" :class="'ca-modal-' + position +' ' + 'ca-modal-' + mode">
			<slot></slot>
		</view>
		<view v-if="mask" class="uni-mask" @touchmove.stop.prevent="moveHandle" catchtouchmove="true"
			@click.stop="hide()"></view>
	</view>
</template>

<script>
	const systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				platform: systemInfo.platform
			}
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			/*
			 * 参数说明（定位）
			 */
			position: { //可能值  top  left  right bottom middle
				type: String,
				default: 'middle'
			},
			/*
			 * 参数说明
			 * full 宽度100%
			 * insert 80%宽度内联小框
			 * cover 宽度高度100%
			 */
			mode: {
				type: String,
				default: 'full'
			},
			mask: {
				type: Boolean,
				default: true
			},
			/*
			 * H5置顶
			 */
			H5Top: {
				type: Boolean,
				default: true
			},
			/*
			 * H5置底
			 */
			H5Bottom: {
				type: Boolean,
				default: true
			},
		},
		computed: {
			animation: {
				get() {
					return this.value
				},
				set(value) {
					this.$emit('input', value)
				}
			}
		},
		watch: {
			animation(value) {
				this.$emit('change', value);
			}
		},
		methods: {
			moveHandle() {
				return;
			},
			hide() {
				this.animation = false;
				return false;
			}
		}
	}
</script>

<style lang="scss">
	@charset "UTF-8";

	.ca-modal {
		position: fixed;
		z-index: 2;
		transition: inherit;
	}

	.ca-modal-body {
		box-sizing: border-box;
		opacity: 0;
		position: fixed;
		top: 88rpx;
		bottom: 100rpx;
		left: 0;
		width: 100%;
		pointer-events: none;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		transition: all 0.2s linear;
		z-index: 98;
	}

	.ca-modal-body.ca-modal-active {
		pointer-events: auto;
		opacity: 1;
	}

	.ca-modal-body.ca-modal-H5Top {
		top: 0;
		z-index: 999;
	}

	.ca-modal-body.ca-modal-H5Bottom {
		bottom: 0;
		z-index: 999;
	}

	.ca-modal-body .uni-mask {
		z-index: 1;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.ca-modal-middle {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.ca-modal-cover {
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		transform: translate(100%, 0);
	}

	.ca-modal-top {
		left: 50%;
		z-index: 98;
		width: 100%;
		height: auto;
		transform: translate(-50%, -100%);
	}

	.ca-modal-top+.uni-mask {
		z-index: 97;
	}

	.ca-modal-full {
		width: 100%;
		left: 0;
		transform: translate(0, -100%);
	}

	.ca-modal-full.ca-modal-top {
		transform: translate(0, -200%);
	}

	.ca-modal-full.ca-modal-bottom {
		transform: translate(0, 100%);
		transition: inherit;
	}

	.ca-modal-right {
		right: 0;
		max-width: 80%;
	}

	.ca-modal-left {
		left: 0;
		max-width: 80%;
	}

	.ca-modal-middle.ca-modal-insert {
		min-width: 380rpx;
		min-height: 380rpx;
		max-width: 102%;
		max-height: 80%;
		transform: translate(-50%, -50%);
		background: none;
		box-shadow: none;
	}

	.ca-modal-body {
		opacity: 0;
		pointer-events: none;
	}

	.ca-modal-active {
		opacity: 1;
		pointer-events: auto;
	}

	.ca-modal-active .ca-modal-top {
		top: 88rpx;
		transform: translate(-50%, 0);
	}

	.ca-modal-active .ca-modal-full {
		transform: translate(0, -50%);
	}

	.ca-modal-active .ca-modal-full.ca-modal-top {
		transform: translate(0, 0);
	}

	.ca-modal-active .ca-modal-bottom {
		transform: translate(0, 0);
	}

	.ca-modal-active .ca-modal-cover {
		transform: translate(0, 0);
	}

	.ca-modal-bottom {
		bottom: 0;
	}
</style>